<template>
  <div class="app-container">
    <!-- 添加或修改设备管理对话框 -->
    <el-drawer size="70%"
               :title="title"
               :visible.sync="open"
               :wrapperClosable="false"
               direction="rtl"
               custom-class="form-drawer"
               ref="drawer"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="drawer-box" style="padding:10px 30px;overflow-x: hidden;overflow-y: auto;height: calc(100% - 56px);border-bottom:1px solid #eee;">
        <div class="title">基本信息</div>
        <el-row :gutter="20" style="bottom:-10px;">
          <el-col :span="12">
            <el-form-item label="设备编码" prop="deviceCode">
              <el-input v-model="form.deviceCode" :disabled="true" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备名称" prop="deviceName">
              <el-input v-model="form.deviceName" :disabled="true" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="IMEI" prop="imei">
              <el-input v-model="form.imei" :disabled="true" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="ICCID" prop="iccid">
              <el-input v-model="form.iccid" :disabled="true" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="安装路段" prop="roadSection">
              <el-input v-model="form.roadSection" :disabled="true" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="安装场地" prop="site">
              <el-input v-model="form.site" :disabled="true" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="安装位置" prop="location">
              <el-input v-model="form.location" :disabled="true" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人" prop="leader">
              <el-input v-model="form.leader" :disabled="true" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设备类型" prop="deviceType">
              <el-radio-group v-model="form.deviceType" disabled="true">
                <el-radio
                  v-for="dict in dict.type.device_type"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="deviceStatus">
              <el-radio-group v-model="form.deviceStatus" disabled="true">
                <el-radio
                  v-for="dict in dict.type.device_status"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input :disabled="true" v-model="form.remark" type="textarea" :rows="3"/>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="title">检测记录</div>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="全部" name="allLine"></el-tab-pane>
              <el-tab-pane label="主线" name="mainLine"></el-tab-pane>
              <el-tab-pane label="1号子线" name="oneLine" v-if="form.deviceType=='1'"></el-tab-pane>
              <el-tab-pane label="2号子线" name="twoLine" v-if="form.deviceType=='1'"></el-tab-pane>
              <el-tab-pane label="3号子线" name="threeLine" v-if="form.deviceType=='1'"></el-tab-pane>
              <el-tab-pane label="4号子线" name="fourLine" v-if="form.deviceType=='1'"></el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
        <!--全部-->
        <div v-if="activeName == 'allLine'">
          <el-table v-loading="allLineLoading" :data="allLineAlarmList">
            <el-table-column label="告警路段" align="center" prop="roadSection" width="180">
              <template slot-scope="scope">{{scope.row.roadSection}}</template>
            </el-table-column>
            <el-table-column label="告警线路" align="center" prop="line"/>
            <el-table-column label="告警类型" align="center" prop="alarmType">
              <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.alarmType=='0'">断电</el-tag>
                <el-tag type="success" v-if="scope.row.alarmType=='1'">缺相</el-tag>
                <el-tag type="success" v-if="scope.row.alarmType=='2'">通电恢复</el-tag>
                <el-tag type="success" v-if="scope.row.alarmType=='3'">设备断线</el-tag>
                <el-tag type="success" v-if="scope.row.alarmType=='4'">设备在线</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="告警描述" align="center" prop="bz"/>
            <el-table-column label="告警时间" align="center" prop="createTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination  v-show="allLineTotal>0"  :total="allLineTotal"  :page.sync="queryParamsAllLineAlarm.pageNum"  :limit.sync="queryParamsAllLineAlarm.pageSize"  @pagination="getAllLineAlarmList"/>
        </div>
        <!--主线-->
        <div v-if="activeName == 'mainLine'">
          <el-table v-loading="mainLineLoading" :data="mainLineAlarmList">
            <el-table-column label="告警路段" align="center" prop="roadSection" width="180">
              <template slot-scope="scope">{{scope.row.roadSection}}</template>
            </el-table-column>
            <el-table-column label="告警线路" align="center" prop="line"/>
            <el-table-column label="告警类型" align="center" prop="alarmType">
              <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.alarmType=='0'">断电</el-tag>
                <el-tag type="success" v-if="scope.row.alarmType=='1'">缺相</el-tag>
                <el-tag type="success" v-if="scope.row.alarmType=='2'">通电恢复</el-tag>
                <el-tag type="success" v-if="scope.row.alarmType=='3'">设备断线</el-tag>
                <el-tag type="success" v-if="scope.row.alarmType=='4'">设备在线</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="告警描述" align="center" prop="bz"/>
            <el-table-column label="告警时间" align="center" prop="alarmTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.alarmTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination  v-show="mainLineTotal>0"  :total="mainLineTotal"  :page.sync="queryParamsMainLineAlarm.pageNum"  :limit.sync="queryParamsMainLineAlarm.pageSize"  @pagination="getMainLineAlarmList"/>
        </div>
        <!--1号子线-->
        <div v-if="activeName == 'oneLine'">
          <el-table v-loading="oneLineLoading" :data="oneLineAlarmList">
            <el-table-column label="告警路段" align="center" prop="roadSection" width="180">
              <template slot-scope="scope">{{scope.row.roadSection}}</template>
            </el-table-column>
            <el-table-column label="告警线路" align="center" prop="line"/>
            <el-table-column label="告警类型" align="center" prop="alarmType">
              <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.alarmType=='0'">断电</el-tag>
                <el-tag type="success" v-if="scope.row.alarmType=='1'">缺相</el-tag>
                <el-tag type="success" v-if="scope.row.alarmType=='2'">通电恢复</el-tag>
                <el-tag type="success" v-if="scope.row.alarmType=='3'">设备断线</el-tag>
                <el-tag type="success" v-if="scope.row.alarmType=='4'">设备在线</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="告警描述" align="center" prop="bz"/>
            <el-table-column label="告警时间" align="center" prop="alarmTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.alarmTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination  v-show="oneLineTotal>0"  :total="oneLineTotal"  :page.sync="queryParamsOneLineAlarm.pageNum"  :limit.sync="queryParamsOneLineAlarm.pageSize"  @pagination="getOneLineAlarmList"/>
        </div>
        <!--2号子线-->
        <div v-if="activeName == 'twoLine'">
          <el-table v-loading="twoLineLoading" :data="twoLineAlarmList">
            <el-table-column label="告警路段" align="center" prop="roadSection" width="180">
              <template slot-scope="scope">{{scope.row.roadSection}}</template>
            </el-table-column>
            <el-table-column label="告警线路" align="center" prop="line"/>
            <el-table-column label="告警类型" align="center" prop="alarmType">
              <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.alarmType=='0'">断电</el-tag>
                <el-tag type="success" v-if="scope.row.alarmType=='1'">缺相</el-tag>
                <el-tag type="success" v-if="scope.row.alarmType=='2'">通电恢复</el-tag>
                <el-tag type="success" v-if="scope.row.alarmType=='3'">设备断线</el-tag>
                <el-tag type="success" v-if="scope.row.alarmType=='4'">设备在线</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="告警描述" align="center" prop="bz"/>
            <el-table-column label="告警时间" align="center" prop="alarmTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.alarmTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination  v-show="twoLineTotal>0"  :total="twoLineTotal"  :page.sync="queryParamsTwoLineAlarm.pageNum"  :limit.sync="queryParamsTwoLineAlarm.pageSize"  @pagination="getTwoLineAlarmList"/>
        </div>
        <!--3号子线-->
        <div v-if="activeName == 'threeLine'">
          <el-table v-loading="threeLineTotal" :data="threeLineAlarmList">
            <el-table-column label="告警路段" align="center" prop="roadSection" width="180">
              <template slot-scope="scope">{{scope.row.roadSection}}</template>
            </el-table-column>
            <el-table-column label="告警线路" align="center" prop="line"/>
            <el-table-column label="告警类型" align="center" prop="alarmType">
              <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.alarmType=='0'">断电</el-tag>
                <el-tag type="success" v-if="scope.row.alarmType=='1'">缺相</el-tag>
                <el-tag type="success" v-if="scope.row.alarmType=='2'">通电恢复</el-tag>
                <el-tag type="success" v-if="scope.row.alarmType=='3'">设备断线</el-tag>
                <el-tag type="success" v-if="scope.row.alarmType=='4'">设备在线</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="告警描述" align="center" prop="bz"/>
            <el-table-column label="告警时间" align="center" prop="alarmTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.alarmTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination  v-show="threeLineTotal>0"  :total="threeLineTotal"  :page.sync="queryParamsThreeLineAlarm.pageNum"  :limit.sync="queryParamsThreeLineAlarm.pageSize"  @pagination="getThreeLineAlarmList"/>
        </div>
        <!--4号子线-->
        <div v-if="activeName == 'fourLine'">
          <el-table v-loading="fourLineLoading" :data="fourLineAlarmList">
            <el-table-column label="告警路段" align="center" prop="roadSection" width="180">
              <template slot-scope="scope">{{scope.row.roadSection}}</template>
            </el-table-column>
            <el-table-column label="告警线路" align="center" prop="line"/>
            <el-table-column label="告警类型" align="center" prop="alarmType">
              <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.alarmType=='0'">断电</el-tag>
                <el-tag type="success" v-if="scope.row.alarmType=='1'">缺相</el-tag>
                <el-tag type="success" v-if="scope.row.alarmType=='2'">通电恢复</el-tag>
                <el-tag type="success" v-if="scope.row.alarmType=='3'">设备断线</el-tag>
                <el-tag type="success" v-if="scope.row.alarmType=='4'">设备在线</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="告警描述" align="center" prop="bz"/>
            <el-table-column label="告警时间" align="center" prop="alarmTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.alarmTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination  v-show="fourLineTotal>0"  :total="fourLineTotal"  :page.sync="queryParamsFourLineAlarm.pageNum"  :limit.sync="queryParamsFourLineAlarm.pageSize"  @pagination="getFourLineAlarmList"/>
        </div>

      </el-form>
      <div class="drawer-footer" style="position: absolute;bottom:0px;display:flex;left:50%;padding:10px 0;transform:translate(-50%,0);">
        <el-button type="danger" plain @click="cancel">取 消</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import { listDeviceManage, getDeviceManage} from "@/api/business/device/deviceManage"
  import {alarmListByImei} from "@/api/business/device/deviceAlarm"
export default {
  name: "DeviceInfo",
  dicts: ['device_status', 'device_type'],
  data() {
    return {
      disabled:false,
      // 标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      deviceId:null,//设备id
      imei:null,//imei
      type:null,//告警线路(0：主线；1：1号子线；2：2号子线；3：3号子线；4：4号子线；5：设备通信状态
      activeName: 'allLine',
      allLineTotal: 0,// 全部告警总条数
      allLineAlarmList: [],//全部告警数据表
      queryParamsAllLineAlarm: {pageNum: 1,pageSize: 10,imei:null,alarmType:null},//全部告警-分页参数
      mainLineTotal: 0,// 主线总条数
      mainLineAlarmList: [],//主线数据表
      queryParamsMainLineAlarm: {pageNum: 1,pageSize: 10,imei:null,alarmType:"0"},//主线-分页参数
      oneLineTotal: 0,// 1号子线总条数
      oneLineAlarmList: [],//1号子线数据表
      queryParamsOneLineAlarm: {pageNum: 1,pageSize: 10,imei:null,alarmType:"1"},//1号子线-分页参数
      twoLineTotal: 0,// 2号子线总条数
      twoLineAlarmList: [],//2号子线数据表
      queryParamsTwoLineAlarm: {pageNum: 1,pageSize: 10,imei:null,alarmType:"2"},//2号子线-分页参数
      threeLineTotal: 0,// 3号子线总条数
      threeLineAlarmList: [],//3号子线数据表
      queryParamsThreeLineAlarm: {pageNum: 1,pageSize: 10,imei:null,alarmType:"3"},//3号子线-分页参数
      fourLineTotal: 0,// 4号子线总条数
      fourLineAlarmList: [],//4号子线数据表
      queryParamsFourLineAlarm: {pageNum: 1,pageSize: 10,imei:null,alarmType:"4"},//4号子线-分页参数
      allLineLoading: true, // 全部线路-遮罩层
      mainLineLoading: true, // 主线-遮罩层
      oneLineLoading: true, // 1号子线-遮罩层
      twoLineLoading: true, // 2号子线-遮罩层
      threeLineLoading: true, // 3号子线-遮罩层
      fourLineLoading: true, // 4号子线-遮罩层
    }
  },
  created() {
    //this.getAllLineAlarmList()//加载全部检测记录
  },
  methods: {
    /** 设备详情 */
    deviceInfo(deviceId) {
      getDeviceManage(deviceId).then(response => {
        this.form = response.data
        this.open = true
        this.title = "设备详情"
        this.getAllLineAlarmList()//加载全部检测记录
      })
    },
    //加载检测记录
    handleClick(tab, event) {
      if (tab.name == 'allLine') {//所有线路
        this.getAllLineAlarmList()
      }else if(tab.name == 'mainLine'){//主线
        this.getMainLineAlarmList()
      }else if(tab.name == 'oneLine'){//1号子线
        this.getOneLineAlarmList()
      }else if(tab.name == 'twoLine'){//2号子线
        this.getTwoLineAlarmList()
      }else if(tab.name == 'threeLine'){//3号子线
        this.getThreeLineAlarmList()
      }else if(tab.name == 'fourLine'){//4号子线
        this.getFourLineAlarmList()
      }
    },
    /** 获取所有检测设备线路信息 */
    getAllLineAlarmList() {
      this.queryParamsAllLineAlarm.imei=this.form.imei
      this.allLineLoading = true
      alarmListByImei(this.queryParamsAllLineAlarm).then(response => {
        this.allLineAlarmList = response.rows
        this.allLineTotal= response.total
        this.allLineLoading = false
      })
    },
    /** 获取主线路检测设备线路信息 告警线路(0：主线；)*/
    getMainLineAlarmList() {
      this.queryParamsMainLineAlarm.imei=this.form.imei
      this.mainLineLoading = true
      alarmListByImei(this.queryParamsMainLineAlarm).then(response => {
        this.mainLineAlarmList = response.rows
        this.mainLineTotal = response.total
        this.mainLineLoading = false
      })
    },
    /** 获取检测设备线路信息 告警线路(1：1号子线；)*/
    getOneLineAlarmList() {
      this.queryParamsOneLineAlarm.imei=this.form.imei
      this.oneLineLoading = true
      alarmListByImei(this.queryParamsOneLineAlarm).then(response => {
        this.oneLineAlarmList = response.rows
        this.oneLineTotal = response.total
        this.oneLineLoading = false
      })
    },
    /** 获取检测设备线路信息 告警线路(2：2号子线；)*/
    getTwoLineAlarmList() {
      this.queryParamsTwoLineAlarm.imei=this.form.imei
      this.twoLineLoading = true
      alarmListByImei(this.queryParamsTwoLineAlarm).then(response => {
        this.twoLineAlarmList = response.rows
        this.twoLineTotal = response.total
        this.twoLineLoading = false
      })
    },
    /** 获取检测设备线路信息 告警线路(3：3号子线；)*/
    getThreeLineAlarmList() {
      this.queryParamsThreeLineAlarm.imei=this.form.imei
      this.threeLineLoading = true
      alarmListByImei(this.queryParamsThreeLineAlarm).then(response => {
        this.threeLineAlarmList = response.rows
        this.threeLineTotal = response.total
        this.threeLineLoading = false
      })
    },
    /** 获取检测设备线路信息 告警线路(4：4号子线；)*/
    getFourLineAlarmList() {
      this.queryParamsFourLineAlarm.imei=this.form.imei
      this.fourLineLoading = true
      alarmListByImei(this.queryParamsFourLineAlarm).then(response => {
        this.fourLineAlarmList = response.rows
        this.fourLineTotal = response.total
        this.fourLineLoading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
    },
  }
}
</script>
<style scoped lang="scss">
  ::v-deep {
    .el-input.is-disabled .el-input__inner {
      background-color: #F5F7FA;
      border-color: #dfe4ed;
      color: #000000;
      cursor: not-allowed;
    }
    .el-range-editor.is-disabled input {
      background-color: #F5F7FA;
      color: #000000;
      cursor: not-allowed;
    }
    .el-radio__input.is-disabled + span.el-radio__label {
      color: #000000;
      cursor: not-allowed;
    }
    .el-textarea.is-disabled .el-textarea__inner {
      background-color: #F5F7FA;
      border-color: #dfe4ed;
      color: #000000;
      cursor: not-allowed;
    }
  }
  .title{
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    color: #333;
    margin: 0;
    padding-bottom:20px;
    &::before{
      content: '';
      width: 5px;
      height: 18px;
      background: #1890FF;
      border-radius: 3px;
      display: inline-block;
      margin-right: 10px;
    }
  }
</style>
